<script lang="ts" setup>
import { useThemeModeStore } from "@/store/themeMode"

const themeMode = useThemeModeStore()
</script>

<template>
  <t-row :class="themeMode.isLight ? 'dark' : 'light'" class="container">
    <t-col :lg="6" :md="6" :sm="12" :xl="6" :xs="12" class="container_in">
      <t-card class="card">
        <t-row class="logo_container">
          <img v-if="themeMode.isLight" alt="" class="logo" src="../assets/images/logo_dark.svg" />
          <img v-else alt="" class="logo" src="../assets/images/logo_light.svg" />
        </t-row>
        <t-divider class="divider" />
          <RouterView/>
      </t-card>
    </t-col>
  </t-row>
</template>

<style lang="less" scoped>
@footer-height: var(--td-comp-size-xxl);
.light {
  background: url("@/assets/images/login_bg_light.png");
}

.dark {
  background: url("@/assets/images/login_bg_dark.png");
}

.container {
  width: 100vw;
  height: calc(100vh - 2 * @footer-height);
  background-size: cover;
  background-color: var(--td-bg-color-container);

  .container_in {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .card {
      width: 360px;

      .logo_container {
        display: flex;
        justify-content: center;
        align-items: center;

        .logo {
          width: 35%;
        }
      }

      .divider {
        margin: 10px 0;
      }

    }
  }


}
</style>
